<template>
<div class="ctn">
  <span> 新版的生命周期函数，可以按需导入到组件中，且只能在 setup() 函数中使用, 但是也可以在setup 外定义, 在 setup 中使用 </span>
  <div> {{state.dao}} </div>
  <div ref="refDemo"> 通过refs 来回去真实dom元素, 这个和react 的用法一样,为了获得对模板内元素或组件实例的引用，我们可以像往常一样在setup()中声明一个ref并返回它  并返回它  并返回它 并返回它</div>
  <span> 还是跟往常一样，在 html 中写入 ref 的名称 </span>
  <span> 在steup 中定义一个 ref </span>
  <span>  steup 中返回 ref的实例</span>
  <span>  onMounted 中可以得到 ref的RefImpl的对象, 通过.value 获取真实dom </span>

  <!--第一步：还是跟往常一样，在 html 中写入 ref 的名称-->
  <div class="mine" ref="elmRefs">
    <span>1111</span>
  </div>
</div>

</template>
<script lang="js">
import { ref, reactive, defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onUnmounted, onUpdated } from 'vue'
export default defineComponent({
  setup () {
    // 新版的生命周期函数，可以按需导入到组件中，且只能在 setup() 函数中使用, 但是也可以在setup 外定义, 在 setup 中使用
    const state = reactive({ dao: 1 })
    setTimeout(() => {
      state.dao = 1000
    }, 3000)

    // 获取真实dom
    const elmRefs = ref()
    const refDemo = ref()

    onBeforeMount(() => {
      console.log('beformounted!')
    })
    onMounted(() => {
      console.log('mounted!')
      console.log(elmRefs.value) // 得到一个 RefImpl 的对象, 通过 .value 访问到数据
      console.log(refDemo.value)
    })
    onBeforeUpdate(() => {
      console.log('beforupdated!')
    })
    onUpdated(() => {
      console.log('updated!')
      // throw(new Error('error out'))
    })

    onBeforeUnmount(() => {
      console.log('beforunmounted!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })

    onErrorCaptured((err) => {
      console.log(err, 'errorCaptured!')
    })

    return {
      state,
      elmRefs,
      refDemo
    }
  }
})
</script>
